<template>
	<view class="main">
		<view class="item" v-if="staffList.length>0" v-for="item in staffList" :key="item.userId">
			<view class="staff-infos-items"  >
				
				<view class="staff-infos-items-vip-crown" :class="{'vip-avatar':item.vip_flag==1}">
					<image :class="item.vip_flag==0?'staff-infos-items-head':'avatar-pic-vip'"
						:src="imgPath + item.avatar" mode="aspectFill">
					</image>
					<view v-if="item.vip_flag" class="vip-crown">
						<image src="@/static/icon3/adasdasd.png" mode="aspectFill"></image>
						<text>金牌</text>
					</view>
				</view>
				<view class="staff-infos-items-nameList">
					<view>
						<text class="names">{{ item.username }}</text>
						<view v-if="item.usex==0" class="sex-nan">
							<image class="sex-image" src="@/static/icon3/nna1111.png" mode="aspectFill"></image>
							{{!item.age ? '未知' : item.age}}
						</view>
						<view v-if="item.usex==1" class="sex-nv">
							<image class="sex-image" src="@/static/icon3/nv111.png" mode="aspectFill"></image>
							{{!item.age ? '未知' : item.age}}
						</view>
					</view>
					<view class="cxDiv">
						<view class="cx">
							<text>诚信值</text>
							<text>{{ item.integrity/100 }}</text>
								
						</view>
						<text class="fg">|</text>
						<view class="cx">
							<text>好评率</text>
							<text>{{ item.haoping }}%</text>
								
						</view>
					</view>
				</view>
				<view class="top-status"  style="background: #ABABAB; font-size: 24rpx;">
					<text>已邀请</text>
				</view>
				<view class="left" style="padding-right: 35rpx;">
					<text style="color: #7F7F7F;">累计接单</text>
					<text style="font-size: 34rpx;color: #FCC928;font-weight: normal;">18</text>
				</view>
				
			</view>
		</view>
       
	</view>
</template>

<script>
import {
		he_evaluate_lv,
		get_user_status
	} from '../../../libs/unit.js'
	export default {
		data() {
			return {
				staffList: [], //雇员列表
				taskId:0
			}
		},
		onLoad(value) {
			this.taskId = value.taskId
			this.imgPath = uni.getStorageSync('imgPath')
			this.getStaff()
		},
		methods: {
           async getStaff() {
			   let haoping = uni.getStorageSync('heEvaluateLv') ? uni.getStorageSync('heEvaluateLv') : []
           	let requestObj = {
				'newdate': 1,
				'pageNum': 0,
				'pageSize': 10,
				'taskId': this.taskId,
			}
           	let res = await this.$fetch(this.$api.my_order_employer_status, requestObj, 'POST')
		   let _res = []
		   let yaoqingList = uni.getStorageSync('invitation_order')['id' + res.rows[0].task_id]
		   await res.rows.forEach((e) => {
		   	if (yaoqingList && yaoqingList.includes(e.userId)) return
		   	if (e.status != 0) {
		   		_res.push(e)
		   		if (haoping.indexOf(e.userId) != -1) {
		   			e.haoping = haoping[haoping.indexOf(e.userId) + 1]
		   			//this.$set(e, 'haoping', haoping[haoping.indexOf(e.userId)+1])
		   		} else {
		   			he_evaluate_lv(e.userId).then((v) => {
		   				this.$set(e, 'haoping', v)
		   			})
		   		}
		   		
		   	}
		   
		   })
			this.staffList = _res
    
           },
		}
		
		
	}
</script>

<style lang="less" scoped>
	.main{
		width: 100%;
		.item{
			width: 100%;
			height: 120rpx;
			background: #fff;
			margin: 30rpx 0;
			padding: 20rpx 0px;
			display: flex;
			    justify-content: center;
			    align-items: center;
				position: relative;
			.staff-infos-items {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			
			.staff-infos-items-image {
				width: 45rpx;
				height: 45rpx;
				margin-left: 30rpx;
				content: url('../../../static/icon1/finishInvite-gou.png');
			}
			
			.staff-infos-items-image1 {
				width: 45rpx;
				height: 45rpx;
				margin-left: 30rpx;
				content: url('../../../static/icon1/finishInvite-gou1.png');
			}
			
			.staff-infos-items-head {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				background-color: #000000;
			}
			
			.staff-infos-items-nameList {
				margin-left: 30rpx;
				width: 108rpx;
				height: 108rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			
				&>view {
					display: flex;
					flex-direction: row;
					align-items: center;
				}
			}
			
			.names {
				font-size: 34rpx;
				font-weight: 500;
				color: #3E220A;
				line-height: 45rpx;
			}
			
			.cx {
				font-size: 24rpx;
				font-weight: 400;
				color: #7F7F7F;
				line-height: 49rpx;
			
				&>text:nth-last-child(1) {
					color: #FE4B28;
				}
			}
			
			.fg {
				font-size: 24rpx;
				color: #7F7F7F;
				line-height: 49rpx;
				margin: 0 20rpx;
			}
			
			.staff-infos-items-pingjia {
				margin-right: 32rpx;
			}
			
			.xb {
				width: 26rpx;
				height: 26rpx;
			}
			
			.cxDiv {
				display: flex;
				flex-direction: row;
			}
			
			.staff-infos-items-pingjia-view {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			
				&>text {
					font-size: 24rpx;
					font-weight: 400;
					color: #3E220A;
					line-height: 45rpx;
				}
			
				&>image {
					width: 24rpx;
					height: 24rpx;
				}
			}
			
			.staff-infos-items-pingjia-div {
				width: 477rpx;
				height: 256rpx;
				position: absolute;
				right: 0;
				margin-top: -50rpx;
				margin-right: 30rpx;
				z-index: 1;
			}
			
			.staff-infos-items-pingjia-sj {
				width: 32rpx;
				height: 32rpx;
				// border-right: 16rpx solid transparent ;
				// border-left: 16rpx solid transparent ;
				// border-bottom: 16rpx solid #FFFFFF;
				transform: rotate(135deg);
				border-color: #fff #fff transparent transparent;
				box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
				margin-left: 421rpx;
			}
			
			.staff-infos-items-pingjia-alert::before {
				position: absolute;
				display: inline-block;
				top: -2rpx;
				left: 412rpx;
				width: 0;
				height: 0px;
				content: '';
				border-style: solid;
				border-width: 20rpx;
				border-color: #fff #fff transparent transparent;
				background-color: #fff;
				transform: rotate(135deg);
				box-shadow: -2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			}
			
			.staff-infos-items-pingjia-alert {
				width: 477rpx;
				height: 240rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 12rpx;
				margin-top: 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			.staff-infos-items-pingjia-alert-item {
				width: 345rpx;
				height: 153rpx;
				position: relative;
				top: 32rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			
			}
			
			.staff-infos-items-pingjia-alert-items {
				width: 100rpx;
				height: 153rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.cxDiv {
				display: flex;
				flex-direction: row;
			}
			
			.sex-nan {
				width: 73rpx;
				height: 32rpx;
				background: #1862F9;
				border-radius: 4rpx;
				margin-left: 8rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 20rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 20rpx;
			}
			
			.sex-nv {
				width: 73rpx;
				height: 32rpx;
				background: #FD5D51;
				border-radius: 4rpx;
				margin-left: 8rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 20rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 20rpx;
			}
			
			.sex-image {
				width: 17rpx;
				height: 17rpx;
			}
			
			.guidance-view {
				width: 690rpx;
				height: 58rpx;
				background-color: rgba(255, 255, 255, .2);
				border-radius: 29rpx;
				margin-top: 32rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #402110;
				text-align: center;
				line-height: 58rpx;
			}
			
			.staff-infos-items-vip-crown {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 108rpx;
				height: 108rpx;
				margin-left: 32rpx;
			}
			
			.vip-crown {
				// width: 148rpx;
				padding: 0 10rpx;
				height: 32rpx;
				background: linear-gradient(0deg, #111832, #343B54);
				border-radius: 16rpx;
				position: absolute;
				top: 78rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			
				&>image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 4rpx;
				}
			
				&>text {
					font-size: 20rpx;
					font-weight: 500;
					color: #FCC928;
					line-height: 32rpx;
				}
			}
			
			.avatar-pic-vip {
				width: 105rpx;
				height: 105rpx;
				border-radius: 50%;
				border: 3rpx solid #FCC928;
			}
			
			.vip-avatar {
				// width: 130rpx;
				// height: 130rpx;
				background-image: url(../../../static/icon3/7868789.png);
				background-size: cover;
			}
			.top-status {
				position: absolute;
				top: 0;
				right: 0;
				width: 158rpx;
				height: 50rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				background: #4E9800;
				border-radius: 0 0 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.left{
				display: flex;
				align-items: center;
				color: #7F7F7F;
				// border: 1px solid #000000;
				margin-top: 48rpx;
					&>text:first-child {
						margin-right: 30rpx;
						height: 34rpx;
						font-size: 12px;
						color: rgba(64, 33, 16, 0.70);
					}
					
					&>text:last-child {
						font-weight: bold;
						font-size: 22px;
						color: #F39B19;
					}
			}
			
		}
	}
	
</style>
